<script lang="ts" setup>
import QuickToolbar from '@/components/QuickToolbar/index.vue'

const handleAdd = () => {
  console.log('handleAdd')
}
const handleBatchDelete = () => {
  console.log('handleBatchDelete')
}
const handleImport = () => {
  console.log('handleImport')
}
const handleExport = () => {
  console.log('handleExport')
}
const handlePrint = () => {
  console.log('handlePrint')
}
const handleRefresh = () => {
  console.log('handleRefresh')
}
const handleCustomBtn = () => {
  console.log('handleCustomBtn')
}
</script>
<template>
  <el-row :guster="20">
    <el-col :span="12">
      <quick-toolbar
        :table-toolbar="true"
        @on-add="handleAdd"
        @on-batch-delete="handleBatchDelete"
        @on-import="handleImport"
        @on-export="handleExport"
        @on-print="handlePrint"
        @on-refresh="handleRefresh"
      >
        <template #leftToolbar>
          <el-button type="success" @click="handleCustomBtn"
            >自定义按钮</el-button
          >
        </template>
      </quick-toolbar>
    </el-col>
    <el-col :span="12">
      <quick-toolbar
        :table-toolbar="true"
        @on-add="handleAdd"
        @on-batch-delete="handleBatchDelete"
        @on-import="handleImport"
        @on-export="handleExport"
        @on-print="handlePrint"
        @on-refresh="handleRefresh"
      >
        <template #rightToolbar>
          <el-button type="danger" plain @click="handleCustomBtn"
            >自定义按钮</el-button
          >
        </template>
      </quick-toolbar>
    </el-col>
  </el-row>
</template>
